<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="订单编号" prop="number">
        <el-input v-model="queryParams.number" placeholder="请输入订单编号" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="用户姓名" prop="username">
        <el-input v-model="queryParams.username" placeholder="请输入用户姓名" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="用户手机号" prop="userMobile">
        <el-input v-model="queryParams.userMobile" oninput="if(value.length>11)value=value.slice(0,11)" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入用户手机号" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="收货人手机号" prop="receiverMobile">
        <el-input v-model="queryParams.receiverMobile" oninput="if(value.length>11)value=value.slice(0,11)" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入用户手机号" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable @clear="getDataList">
          <el-option :label="item.label" :value="item.value" v-for="item,index in dict.type.jieke_order_status" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择订单类型" clearable @clear="getDataList">
          <el-option :label="item.label" :value="item.value" v-for="item,index in dict.type.jieke_order_type" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="加急服务" prop="urgent">
        <el-select v-model="queryParams.urgent" placeholder="请选择加急服务" clearable @clear="getDataList">
          <el-option label="是" :value="2"></el-option>
          <el-option label="否" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="paymentMethod">
        <el-select v-model="queryParams.paymentMethod" placeholder="请选择支付方式" clearable @clear="getDataList">
          <el-option :label="item.label" :value="item.value" v-for="item,index in dict.type.jieke_payment_method" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="下单时间" prop="createtime">
        <el-date-picker v-model="queryParams.createtime" type="datetime" placeholder="请选择下单时间" align="right" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportHandle" v-hasPermi="['deliver:deliverMember:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" width="55" align="center" prop="id" />
      <el-table-column label="订单编号" width="200" align="center" prop="number" />
      <el-table-column label="订单已支付金额" width="130" align="center" prop="payPrice" />
      <el-table-column label="是否需要补差价" width="130" align="center" prop="supFlag" v-hasPermi="['order:orderGoods:update']">
        <template slot-scope="scope">
          <el-tag class="difference" :type="scope.row.supFlag == 1 ? 'danger' : ''" @click="differenceHandle(scope.row)">{{scope.row.supFlag == 1 ? '是(￥'+ (scope.row.shortfall ? scope.row.shortfall : 0)  +')': '否'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.jieke_order_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="订单类型" width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.jieke_order_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="是否返洗" width="100" align="center">
        <template slot-scope="scope">
          <div @click="detailHandle(scope.row.toBackId)" :style="scope.row.toBackId ? 'color:#1890ff;cursor: pointer;' : ''">
            {{scope.row.toBackId ? '是' : '否'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" width="100" align="center" prop="userName" />
      <el-table-column label="用户手机号" width="120" align="center" prop="userMobile" />
      <el-table-column label="收货人姓名" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.orderAddress ? scope.row.orderAddress.recipientName : ''}}
        </template>
      </el-table-column>
      <el-table-column label="收货人手机号" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.orderAddress ? scope.row.orderAddress.contactNumber : ''}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.deliverMemberVo ? scope.row.deliverMemberVo.name : ''}}
        </template>
      </el-table-column>
      <el-table-column label="骑手电话" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.deliverMemberVo ? scope.row.deliverMemberVo.mobile : ''}}
        </template>
      </el-table-column>
      <el-table-column label="柜组编号" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.vcabinetDrawer ? scope.row.vcabinetDrawer.cabinetGroupNo : ''}}
        </template>
      </el-table-column>
      <el-table-column label="柜子名称" width="200" align="center">
        <template slot-scope="scope">
          {{scope.row.vcabinetDrawer ? scope.row.vcabinetDrawer.name : ''}}
        </template>
      </el-table-column>
      <el-table-column label="加急服务" width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.jieke_order_urgent" :value="scope.row.urgent" />
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.jieke_payment_method" :value="scope.row.paymentMethod" />
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="150" align="center" prop="createtime" />
      <el-table-column fixed="right" label="操作" width="260" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" :class="scope.row.status==51 ? 'btnColor' : ''" icon="el-icon-info" @click="detailHandle(scope.row.id,scope.row)" v-hasPermi="['order:order:query']" v-if="detailBtn">{{scope.row.status==51 ? '审核' : '详情'}}</el-button>
          <el-button size="mini" type="text" v-if="(scope.row.status==10||scope.row.status==23) && riderBtn" icon="el-icon-sort" @click="updataRider(scope.row)" v-hasPermi="['order:deliver:switch']">骑手转单</el-button>
          <el-button size="mini" type="text" icon="el-icon-coin" @click="refundHandle(scope.row)" v-hasPermi="['order:refund:number']" v-if="refundBtn && (scope.row.status!=52 && scope.row.status!=91 && scope.row.status!=50 && scope.row.status!=90 && scope.row.status!=1)">退款</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" v-hasPermi="['order:order:edit']" v-if="addOrUpdateBtn">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" v-hasPermi="['order:order:remove']" v-if="deleteBtn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 选择骑手弹窗 -->
    <riderChoose v-if="riderDilogVisible" ref="riderDialog" @refreshDataList="getDataList"></riderChoose>
    <!-- 选择商品弹窗 -->
    <OrderGoodsList v-if="orderGoodsListVisible" ref="goodsListDialog" @refreshDataList="getDataList"></OrderGoodsList>
    <!-- 弹窗, 详情 -->
    <Detail v-if="detailVisible" ref="detailDialog" @refreshDataList="getDataList"></Detail>
    <Difference v-if="differenceVisible" ref="differenceDialog" @refresh="getDataList"></Difference>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './index-add-or-update'  //新增修改的状态弹窗
import Detail from './details'  //详情弹窗
import OrderGoodsList from './orderGoodsList.vue'  //选择商品弹窗
import Difference from './difference.vue'  //补差价弹窗
export default {
  name: "Order",
  dicts: ['jieke_order_status', 'jieke_payment_method', 'jieke_order_type', 'jieke_order_urgent'],
  mixins: [mixinViewModule],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      mixinViewModuleOptions: {
        getDataListURL: '/order/list',
        getDataListIsPage: true,
        deleteURL: '/order/remove',
        deleteIsBatch: true,
      },
      // 查询参数
      queryParams: this.params,
      pageNum: 1,                    // 当前页码
      pageSize: 10,                  // 每页数
      total: 0,                   // 总条数
      uploadUrl: 'http://oss.jiekee.com/',
      riderDilogVisible: false, //骑手弹窗是否展示
      orderGoodsListVisible: false, //选择商品弹窗是否展示
      detailVisible: false,  //详情弹窗是否显示
       differenceVisible: false, //补差价弹窗
      removeOrderGoods: [], //补差价删除的商品
    }
  },
  props: {
    //  riderBtn                              骑手转单按钮是否显示
    //  addOrUpdateBtn                        新增修改按钮是否显示
    //  deleteBtn                             删除按钮是否显示
    //  refundBtn                             退款按钮是否显示
    //  rebackBtn                             返洗按钮是否显示
    //  detailBtn                             详情按钮是否显示
    riderBtn: {
      type: Boolean,
      default: false
    },
    addOrUpdateBtn: {
      type: Boolean,
      default: false
    },
    deleteBtn: {
      type: Boolean,
      default: false
    },
    refundBtn: {
      type: Boolean,
      default: false
    },
    rebackBtn: {
      type: Boolean,
      default: false
    },
    detailBtn: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default: {}
    },
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
    OrderGoodsList, //选择商品进行操作
    Detail, //详情弹窗
    Difference, //补差价弹窗
  },
  methods: {
    // 点击补差价按钮
    differenceHandle(row) {
      if(row.paymentMethod !=10 && row.paymentMethod !=60){
        return
      }
      this.differenceVisible = true
      this.$nextTick(() => {
        this.$refs.differenceDialog.id = row.id
        this.$refs.differenceDialog.init()
      })
    },
    // 点击骑手转单
    updataRider(row) {
      this.riderDilogVisible = true
      this.$nextTick(() => {
        this.$refs.riderDialog.row = row
        this.$refs.riderDialog.init()
      })
    },
    // 点击详情
    detailHandle(id, row) {
      if (!id) {
        return
      }
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.detailDialog.id = id
        this.$refs.detailDialog.row = row
        this.$refs.detailDialog.init()
      })

    },
    // 点击退款
    refundHandle(row) {
      this.orderGoodsListVisible = true
      this.$nextTick(() => {
        this.$refs.goodsListDialog.init()
        this.$refs.goodsListDialog.id = row.id
        this.$refs.goodsListDialog.type = 'refund'
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.btnColor {
  color: #f56c6c;
}
.difference{
  cursor:pointer;
}
</style>
